<template>
  <div class="scheduling">
    <el-breadcrumb>
      <el-breadcrumb-item>日常工作管理</el-breadcrumb-item>
      <el-breadcrumb-item>排班管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tabs">
      <el-tabs v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane label="楼层服务设置"
          name="first"  v-if="isHas('dispatchlist','first')">
          <FloorManagement/>
        </el-tab-pane>
        <el-tab-pane label="排班组管理"
          name="second"  v-if="isHas('platoonmanagelist','second')">
          <SchedulingManagement/>
        </el-tab-pane>
        <el-tab-pane label="排班规则设置"
          name="third"  v-if="isHas('platoonlist','third')">
          <SchedulingRule/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import FloorManagement from "./floor_management.vue";
import SchedulingManagement from "./scheduling_management.vue";
import SchedulingRule from "./scheduling_rule.vue";
import { has } from "@/public/js/util";
export default {
  components: {
    FloorManagement,
    SchedulingManagement,
    SchedulingRule
  },
  props: {},
  data() {
    return {
      activeName: "first",
      isFirst: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick() {},
    isHas(role, tab) {
      if (this.isFirst) {
        if (has(role, this)) {
          this.activeName = tab;
          this.isFirst = false;
        }
      }
      console.log(role,has(role, this))
      return has(role, this);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.scheduling {
  .tabs {
    margin-top: 20px;
    background-color: white;
    padding: 20px 30px;
    position: relative;
  }
}
</style>